// pages/detail-search/index.js

import { 
  getHotSearch ,
  getSearchSuggest,
  getSearchResult } from '../../../service/search-api'

  import debounce from '../../../utils/debounce'
  import stringToNodes from '../../../utils/stringToNode'
  const getDebounceSearchSuggest = debounce(getSearchSuggest,300)

Page({
  data: {
    hotSearchData:[], //热门搜索数据
    suggestData:[],//建议搜索得数据 
    resultData:[],//热门搜索的关键词数据
    searchValue:'',//搜索框输入关键词
    suggestSearchNodes:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.getHotSearchData()
  },
  // 发送网络请求
  getHotSearchData(){
    getHotSearch().then(res=>{
      this.setData({hotSearchData:res.result.hots})
    })
  },
  // 点击搜索框输入内容变化时触发
  handleSearchChange(event){
    //1.拿到搜索框输入得关键词
    const searchValue = event.detail  
     //2.保存关键词
    this.setData({searchValue})
    // 3.现在出现一个问题，就是搜索框内输入内容后，删除内容就会没有keywords，就会报错
    // 解决方案：如果搜索框为空时，就把建议搜索的数据清空
    if(!searchValue.length){
      this.setData({ suggestData:[],resultData:[] })
      // 出现bug：搜索框输入内容，把内容删除之后，却还是在搜索建议的页面
      // 原因是因为获取数据的函数，使用了防抖，searchValue虽然已经为空，但是调用数据的函数还在等待，函数是一个闭包，所以searchValue拿的是第一次输入的内容，
      // 如果searchValue为空就不调用接口拿数据
      getDebounceSearchSuggest.cancel()
      return
    }
    //4.拿到数据
    getDebounceSearchSuggest(searchValue).then(res=>{ 
      //获取数据
      const suggestKeywords = res.result.allMatch
      this.setData({suggestData:suggestKeywords})
    //5.创建node 搜索时搜索到内容与关键词相关的搜索结果就显示不一样的颜色

     if(!suggestKeywords)return
     //获取歌曲的关键字
      const suggestNodes = suggestKeywords.map(item=>item.keyword)
      const  suggestSearchNodes = []
      //遍历关键字
      for(const keyword of suggestNodes){ 
       const nodes = stringToNodes(keyword,searchValue)
       suggestSearchNodes.push(nodes)
      }
      this.setData({suggestSearchNodes})
    })
  },
  //获取关键词的歌单数据
  getResultData(){ 
    const searchValue = this.data.searchValue
     getSearchResult(searchValue).then(res=>{
      this.setData({resultData:res.result.songs})
    }) 
  },
  //点击关键词，跳转歌单
  handleKeywordClick(event){
     const keyword = event.currentTarget.dataset.keyword
     this.setData({searchValue:keyword})
     this.getResultData()
  }

})